<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    :inline="true"
    class="demo-ruleForm demo-form-inline the_form"
  >
    <el-form-item label="商品图片" prop="desc">
      <el-upload
        :limit="1"
        action="/upload/tools/saveavatar/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-plus" />
      </el-upload>
    </el-form-item>
    <el-form-item label="商品轮播图" prop="swiperImage">
      <el-upload
        :limit="5"
        action="/upload/tools/saveavatar/"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleSwiperSuccess"
      >
        <i class="el-icon-plus" />
      </el-upload>
    </el-form-item>
    <el-form-item label="商品名称" prop="title">
      <el-input v-model="ruleForm.title" />
    </el-form-item>
    <el-form-item label="商品简介" prop="desc" style="width: 100%">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item label="单位" prop="dw">
      <el-input v-model="ruleForm.dw" />
    </el-form-item>
    <el-form-item label="运费模板" prop="freightTemplate">
      <el-select
        v-model="ruleForm.freightTemplate"
        clearable
        placeholder="包邮"
      >
        <el-option
          v-for="item in freightTemplateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <!-- <div class="day">
      <span>当天参与活动次数:</span>
      <el-input-number
        v-model="num"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </div> -->

    <div class="block">
      <span class="demonstration">活动日期:</span>
      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      >
      </el-date-picker>
    </div>
    <div class="day1">
      <span>拼团实数(单位 小时):</span>
      <el-input-number
        v-model="num"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </div>
    <div class="day">
      <span>当天参与活动次数:</span>
      <el-input-number
        v-model="numm"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </div>
    <div class="day">
      <span>排序:</span>
      <el-input-number
        v-model="nummm"
        :min="1"
        :max="10"
        @change="handleChange"
      />
    </div>
    <div class="activity">
      活动状态:
      <el-radio v-model="radio" label="1">关闭</el-radio>
      <el-radio v-model="radio" label="2">开启</el-radio>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      num: 1,
      numm: 1,
      nummm: 1,
      ruleForm: {
        title: "", // ，名称
        keyword: "", // 关键词
        desc: "", // 简介
        image: "", // 封面图
        freightTemplate: "", // 运费模板id
        class: "",
        dw: "", // 单位
        swiperImage: [],
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        keyword: [
          {
            required: true,
            message: "请输入关键字",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        desc: [
          {
            required: true,
            message: "请输入简介",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
        dw: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
          {
            max: 10,
            message: "最多10个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
    handleChange(value) {
      console.log(value);
    },
    // 图片上传成功实现本地预览
    handleSwiperSuccess(res, file) {
      this.ruleForm.swiperImage.push(URL.createObjectURL(file.raw)); // 表单获取到提交时要传的图片路径
    },
    // 图片上传成功实现本地预览
    handleAvatarSuccess(res, file) {
      this.ruleForm.image = URL.createObjectURL(file.raw); // 表单获取到提交时要传的图片路径
      console.log(this.ruleForm.image);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resolve("submit!");
          } else {
            reject("error submit!!");
            return false;
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss">
.activity {
  margin-left: 30px;
  margin-top: 20px;
}
.block {
  margin-left: 20px;
  span {
    margin-top: 10px;
  }
}
.day {
  margin-left: 30px;
  span: {
    margin-top: 10px;
  }
}
.the_form {
  & > div {
    width: 48%;
    display: inline-flex !important;
    .el-form-item__content {
      flex: 1;
      .el-select {
        display: block;
      }
    }
  }
}
.block {
  float: left;
  margin-left: 65px;
}
.day1 {
  float: left;
  margin-top: 20px;
  margin-left: 30px;
}
.day {
  float: left;
  margin-top: 20px;
  margin-left: 45px;
}
</style>
